<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'

import { SubmitBtn } from '@fl/components'

import SelectLevelFirst from './select-level-first.vue'
import SelectLevelSecond from './select-level-second.vue'

const selectFirstVisible = ref<boolean>(false)
const selectSecondVisible = ref<boolean>(false)

const id = defineModel<any>('id')

const level = defineModel<any>('level')

const visible = defineModel<boolean>('visible', { required: true })

const dialog = computed(() => level.value === 1 ? '新增项目' : '添加二级项目')

const formRef = ref()

const state = ref<any>({
    a1: '关联组织',
    a2: '一级项目（工程）名称',
    a3: '111',
    a22: '',
    a33: '',
},
)

const columns: PlusColumn[] = [
    {
        colProps: {
            span: 12,
        },
        fieldProps: {
            disabled: level.value === 2,
        },
        label: '关联组织',
        prop: 'a1',
    },
    {
        colProps: {
            span: 12,
        },
        label: '一级项目（工程）名称',
        prop: 'a22',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: level.value === 1,
        label: '二级项目（工程）名称',
        prop: 'a33',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: level.value === 1,
        label: '项目联系人',
        prop: 'a2',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: level.value === 1,
        label: '联系方式',
        prop: 'a2',
    },
    {
        colProps: {
            span: 12,
        },
        label: '项目编号',
        prop: 'a3',
        valueType: 'text',
    },
]

const rules = {
    a1: [
        {
            message: '请选择关联组织',
            required: true,
            trigger: ['blur', 'change'],
        },
    ],
    a2: [
        {
            message: '一级项目（工程）名称',
            required: true,
            trigger: ['blur', 'change'],
        },
    ],

}

function cancel() {
    visible.value = false
}

function reset() {
    id.value = ''
    level.value = 0
    formRef.value.formInstance.resetFields()
}

function showSelectFirst() {
    selectFirstVisible.value = true
}

function showSelectSecond() {
    selectSecondVisible.value = true
}
</script>

<template>
    <PlusDialog v-model="visible"
                :title="dialog"
                width="800"

                @cancel="cancel"
                @closed="reset"
    >
        <PlusForm ref="formRef"
                  v-model="state"
                  :columns="columns"
                  :label-width="130"
                  :has-footer="false"
                  :rules="rules"
                  label-position="top"
                  class="max-h-600 overflow-x-hidden overflow-y-auto"
                  :row-props="{ gutter: 20 }"
        >
            <template #plus-field-a22>
                <template v-if="level === 1">
                    <div class="flex gap-10 w-full">
                        <el-input v-model="state.a22"
                                  class="flex-1"
                                  placeholder="请输入"
                                  clearable
                        />

                        <el-button type="primary"
                                   @click="showSelectFirst"
                        >
                            选择
                        </el-button>
                    </div>
                </template>

                <template v-else>
                    111
                </template>
            </template>

            <template #plus-field-a33>
                <div class="flex gap-10 w-full">
                    <el-input v-model="state.a33"
                              class="flex-1"
                              placeholder="请输入"
                              clearable
                    />

                    <el-button type="primary"
                               @click="showSelectSecond"
                    >
                        选择
                    </el-button>
                </div>
            </template>
        </PlusForm>

        <template #footer>
            <div class="mx-auto">
                <el-button @click="cancel">
                    取消
                </el-button>

                <SubmitBtn type="primary">
                    提交
                </SubmitBtn>
            </div>
        </template>
    </PlusDialog>

    <SelectLevelFirst v-model:visible="selectFirstVisible" />

    <SelectLevelSecond v-model:visible="selectSecondVisible" />
</template>
